<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/layui/css/layui.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
		<div class="layui-btn-group demoTable">
		  <button class="layui-btn" data-type="add">新增</button>
		  <button class="layui-btn" data-type="deleteAll">批量删除</button>
		</div>
	<table id="demo" lay-filter="test"></table>
	
	<script type="text/html" id="barDemo">
       <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
	
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/layui/layui.js" ></script>
	<script src="<%=request.getContextPath()%>/static/lib/jquery/jquery-1.11.1.js"></script>
	<script src="${pageContext.request.contextPath}/static/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="<%=request.getContextPath()%>/static/common/mylayer.js"></script>
	<script type="text/javascript">
	layui.use('table', function(){
		  var table = layui.table;
		  console.log(table.data);
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 500
		    ,url: '${pageContext.request.contextPath}/role/getRoleList.action' //数据接口
		    ,page: true //开启分页
		    ,cellMinWidth : 30
		    ,id : "layuiId"
		    ,cols: [[ //表头
		       {type : 'checkbox'}
		      ,{field: 'id', title: 'ID',  sort: true}
		      ,{field: 'name', title: '用户名',sort: true}
		      ,{field: 'sn', title: 'sn', sort: true}
		      ,{fixed: 'right',  align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
		    ]]
		  });
		  var $ = layui.$, active = {
				  add: function(){ //获取选中数据
				      layer.open({
				    	  type : 2,
				    	  title : "新增",
				    	  area : ["400px","500px"],
				    	  content : "${pageContext.request.contextPath}/role/getAddRolePage.action"
				      })
				    }
				    ,deleteAll: function(){ //获取选中数目
				       var checkStatus = table.checkStatus('layuiId');
				       var data = checkStatus.data;
				       console.log(data);
				       var ids = [];
				       for(var i in data){
				    	   ids.push(data[i].id)
				       }
				       ids = ids.join(",");
				       $.ajax({
				    	   type : "POST",
				    	   dataType : "json",
				    	   data : {"ids" : ids},
				    	   url : "${pageContext.request.contextPath}/role/deleteAll.action",
				    	   success : function(resp){
				    		   if(resp.code == 0){
				    			   mylayer.success(resp.msg);
				    			   table.reload("layuiId");
				    		   } else {
				    			   layer.close(index);
				    			   mylayer.error(resp.msg);
				    		   }
				    	   }
				       })
				    }
				  };
				  
				  $('.demoTable .layui-btn').on('click', function(){
				    var type = $(this).data('type');
				    active[type] ? active[type].call(this) : '';
				  });
		//监听工具条
			table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  console.log(obj);
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的DOM对象
			 if(layEvent === 'del'){ //删除
			    layer.confirm('真的删除行么', function(index){
			      	$.ajax({
			      		data : {"id" : data.id},
			      		type : "POST",
			      		dataType : "json",
			      		url : "${pageContext.request.contextPath}/role/deleteById.action",
			      		success : function(resp){
			      			if(resp.code == 0){
			      				mylayer.success(resp.msg);
			      				table.reload("layuiId");
			      			} else {
			      				mylayer.error(resp.msg);
			      				layer.close(index);
			      			}
			      		}
			      	})
			    });
			  } else if(layEvent === 'edit'){ //编辑
			    	layer.open({
			    		type : 2,
			    		title : '修改',
			    		area : ['400px','500px'],
			    		content : "${pageContext.request.contextPath}/role/toUpdate.action?id="+data.id
			    	})
			  }
			});
});
	
	</script>
</body>
</html>